{% extends "base.html" %}
{% load static %}
{% load scenic_tags %}
{% load forum_tags %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/index.js' %}"></script>
{% endblock %}

{% block content %}
<div class="hero-section">
    <!-- 轮播图部分 -->
    <div class="carousel-container">
        <div class="carousel">
            {% get_random_spots 4 as random_spots %}
            {% for spot in random_spots %}
            <div class="slide">
                <img src="{{ spot.image_Homepage.url }}" alt="{{ spot.title }}">
                <div class="slide-caption">
                    <h3>{{ spot.title }}</h3>
                </div>
            </div>
            {% endfor %}
        </div>
        <button class="carousel-btn prev">&lt;</button>
        <button class="carousel-btn next">&gt;</button>
    </div>

    <!-- 帖子展示部分 -->
    <div class="forum-posts">
        <h2>最新讨论</h2>
        <div class="posts-grid">
            {% get_latest_posts 4 as recent_posts %}
            {% for post in recent_posts %}
            <div class="post-card">
                <h4>{{ post.title }}</h4>
                <p class="post-excerpt">{{ post.content|truncatechars:100 }}</p>
                <div class="post-meta">
                    <span>作者: {{ post.author.username }}</span>
                    <span>{{ post.created_at|date:"Y-m-d" }}</span>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}